<template>
	<el-dialog title="赠送套餐" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
		<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
			<el-form-item label="应用名称" prop="app_id" label-width="100px">
				<el-select v-model="editForm.app_id" placeholder="请选择" @change="appchange">
					<el-option v-for="item in appList" :key="item.label" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="套餐名称" prop="product_id" label-width="100px">
				<el-select v-model="editForm.product_id" placeholder="请选择" :style="{ width: '100%' }">
					<el-option
						v-for="item in productList"
						:key="item.product_id"
						:label="item.name"
						:value="item.product_id"
					>
						<span style="float: left"
							>{{ item.name
							}}<el-tag style="margin-left: 4px" v-if="item.client_type" size="small">{{
								item.client_type
							}}</el-tag></span
						>
						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注" prop="remark" label-width="100px">
				<el-input v-model="editForm.remark" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('editForm')">处理</el-button>
				<el-button @click="resetForm('editForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
export default {
	name: 'SendProduct',
	data() {
		return {
			editForm: {},
			editFormRules: {
				app_id: [{ required: true, message: '请选择产品', trigger: 'blur' }],
				product_id: [{ required: true, message: '请选择套餐', trigger: 'blur' }],
			},
			dialogVisible: false,
			appList: [
				{ value: 'subtitle', label: 'subtitle' },
				{ value: 'translator', label: 'translator' },
				{ value: 'glarity', label: 'glarity' },
			],
			productList: [],
		};
	},
	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$axios.post('/expense/user/plan/gift', this.editForm).then((res) => {
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
							onClose: () => {
								this.$emit('refreshDataList');
							},
						});
						this.dialogVisible = false;
						this.resetForm(formName);
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		appcProductChange(info, item) {
			console.log(info, item);
			//this.editForm.product_id = info;
		},
		appchange(info) {
			console.log(info);
			this.$axios
				.get('/expense/product/list', {
					params: {
						product_type: 'PURCHASE',
						app_id: info,
					},
				})
				.then((res) => {
					console.log(res);
					//this.editForm.product_id = '';
					this.productList = res.data.records;
				});
		},
		init(item) {
			this.dialogVisible = true;
			this.productList = [];
			const info = JSON.parse(JSON.stringify(item));
			this.editForm = {
				user_id: info.uid,
			};
		},
	},
};
</script>

<style scoped></style>
